<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>我的优惠券</title>
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<style type="text/css">
		body {
			background: #ffffff;
			padding: 0.1rem 0.06rem 0 0.11rem;
		}

		.item-wraper {
			width: 3.58rem;
			height: 1.28rem;
			background-size: cover;
			position: relative;
		}

		.item-wraper .item-left {
			position: absolute;
			left: 0.13rem;
			top: 0.38rem;

		}

		.item-wraper .item-left .left-top {
			margin-bottom: 0.09rem;
			text-align: center;


		}

		.item-wraper .item-left .left-top .money-icon {
			font-size: 0.14rem;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 0.14rem;
		}

		.item-wraper .item-left .left-top .money {
			font-size: 0.25rem;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 0.25rem;
		}

		.item-wraper .item-left .left-bottom {
			font-size: 0.12rem;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			line-height: 0.12rem;
			text-align: center;
			margin:auto;
		}
		.item-wraper .item-left .left-bottom span{
			display: inline-block;
			text-align: center;
		}
		.item-wraper .item-right {
			position: absolute;
			left: 1.1rem;
			top: 0.43rem;
		}

		.item-wraper .item-right .right-top {
			font-size: 0.18rem;
			font-weight: 400;
			color: rgba(46, 46, 46, 1);
			line-height: 0.18rem;
			margin-bottom: 0.11rem;
		}

		.item-wraper .item-right .right-bottom {
			display: flex;
			align-items: center;
			font-size: 0.12rem;
			font-weight: 400;
			color: rgba(127, 127, 127, 1);
			line-height: 0.12rem;
		}

		.item-wraper .item-right .right-bottom img {
			margin-left: 0.33rem;
			width: 0.16rem;
			height: 0.16rem;
		}

		.use-btn {
			position: absolute;
			right: 0.19rem;
			top: 0.16rem;
			display: inline-block;
			font-size: 0.12rem;
			font-weight: 400;
			color: rgba(0, 90, 147, 1);
			line-height: 0.12rem;
			padding: 0.05rem 0.1rem;
			background: rgba(227, 244, 255, 1);
			border-radius: 0.11rem;
			border: 1px solid rgba(0, 90, 147, 1);
		}

		.overdue-btn {
			position: absolute;
			right: 0.19rem;
			top: 0.16rem;
			display: inline-block;
			font-size: 0.12rem;
			font-weight: 400;
			color: rgba(89, 89, 89, 1);
			line-height: 0.12rem;
			padding: 0.05rem 0.1rem;
			background: rgba(240, 241, 242, 1);
			border-radius: 0.11rem;
			border: 1px solid rgba(89, 89, 89, 1);
		}
		.title{
			width: 75px;
			height: 25px;
			font-size: 25px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			/*line-height: 25px;*/
			text-align: center;
			vertical-align: center;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak="">
		<div class="item-wraper" :style="{backgroundImage:vo.status_name == '未使用' ? 'url('+coupon+')' : 'url('+overdue+')'}" v-for="(vo,index) in list" :key="index">
			<div class="item-left" v-if="vo.coupon_temp_id==2">
				<div class="title">
					<!-- <span class="money-icon">￥</span> -->
					<span class="title" v-text="vo.coupon_type"></span>
				</div>
				<div class="left-bottom">
					<!-- <span>满¥{{vo.full_money}}可用</span> -->
				</div>
			</div>
			<div class="item-left" v-else>
				<div class="left-top">
					<span class="money-icon">￥</span>
					<span class="money">{{price_format('yuan',vo.money)}}.{{price_format('fen',vo.money)}}</span>
				</div>
				<div class="left-bottom">
					<span>满¥{{price_format('yuan',vo.full_money)}}.{{price_format('fen',vo.full_money)}}可用</span>
				</div>
			</div>
			<div class="item-right">
				<div class="right-top" v-text="vo.name"></div>
				<div class="right-bottom">
					<div>有效期 {{vo.start_time}}-{{vo.end_time}}</div>
					<!-- <img @click="choose(index,vo.id)" v-if="vo.status_name == '未使用'" :src="choose_num == index ? circle_active : circle_null" alt /> -->
				</div>
			</div>
			<!-- 使用或已过期按钮 -->
			<div class="use-btn" v-if="vo.status_name == '未使用'" onclick="open_win('goods_list_type', 'widget://html/goods/goods_list_type.html', false,{coupon:1})" >去使用</div>
			<div class="overdue-btn" v-else>已过期</div>

		</div>
			<!-- 缺省页面 -->
			<div class="aui-text-center"  v-if="list.length < 1" style="margin-top: 1.04rem;" tapmode >
				<img src="../../image/bg/bg-nonecar.png" style="width:1.51rem;margin-left:50%;transform:translateX(-50%);" />
				<div style="font-size:0.14rem;font-family:PingFangSC-Regular;font-weight:400;color:#B3B3B3;margin-top:0.27rem;width:100%; text-align: center;">
				   暂无数据
				</div>
			</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data: {
			goldList: [],
			gold: "",
			level_name: "",
			navbarHeight: 0,
			dataList: [],
			checked: true,
			show: false,
			coupon: "../../image/icons/coupon-bc.png",
			overdue: "../../image/icons/overdue-bc.png",
			circle_null: "../../image/icons/circle_null.png",
			circle_active: "../../image/icons/circle_active.png",
			list: [],
			choose_num: null,
		},

		methods: {
			price_format: function(type, price) {
				var status = (price + '').indexOf('.')
				if (status == '-1') {
					if (type == 'yuan') {
						return price;
					}
					if (type == 'fen') {
						return '00';
					}
				}
				var price_array = (price + '').split('.')
				if (type == 'yuan') {
					return price_array[0];
				}
				if (type == 'fen') {
					var price_fen = price_array[1].length < 2 ? price_array[1] + '0' : price_array[1];
					return price_fen;
				}
			},
			get_info: function() {
				get_data('api/coupon/couponList', {
					token: $api.getStorage('token')
				}, function(ret) {
					console.log(JSON.stringify(ret))
					if (ret.status) {
						vm.list = ret.data;
					}
				})
			},
		}
	})

	apiready = function() {
		vm.get_info();
	};
</script>

</html>
